<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布课程</title>
  <link rel="stylesheet" href="./CSS/addCourse.css">
</head>

<body>
  <div id="app">
    <div class="head">
      <div class="container" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>

          <div class="backTocourse" @click="backToRace()">
            返回首页
          </div>
        </div>

        <div class="userBox">
          <div class="userImage">
            <img :src="companyMsg.logo" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{companyMsg.cname}}
          </div>
        </div>
      </div>
    </div>

    <div class="container2">
      <div class="title">
        <p class="huaxian"></p>
        <p class="titleText">比赛信息</p>
        <p class="huaxian"></p>
      </div>

      <p style="    color: #666">比赛名字</p>
      <input type="text" class="courseNameIn" placeholder="填写比赛名称" v-model="rname">

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">主办方 </p>
      <input type="text" class="coursePay" :value="companyMsg.cname" readonly="readonly">

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">比赛描述</p>
      <textarea cols="107" rows="15" v-model="rdes"></textarea>

      <p style="color: #666;margin-top: 25px;margin-bottom: 10px;">上传封面</p>
      <div class="shangchuanimage">
        <input type="file" accept=".png,.jdp" class="imageUploadinput" @change="getImageUrl($event)">
        <div>
          <button class="imageUpload">上传封面</button><br>
        </div>
        <div class="showImage">
          <img :src="showimageUrl" alt="./image/noimage.jpg" style="width: 100%;height: 100%;">
        </div>

      </div>



      <div class="button">
        <button class="fabuCourse" @click="publicRace">发布比赛</button>
      </div>
    </div>
  </div>


  <div class="footer"></div>

  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',

      // 生命周期函数
      created(){
        const companyMsg = JSON.parse(sessionStorage.getItem("company"))
        console.log(companyMsg)

        if(companyMsg==null){
          location.href="loginCompany.html"
        }
        else {
          this.companyMsg = companyMsg
        }
      },
      data: {
        showimageUrl: './image/noimage.jpg',
        companyMsg:{},
        imageUpload:null,

        rname:'',
        rdes:'',
      },
      methods: {
        publicRace(){
          console.log(this.rname)
          console.log(this.rdes)
          console.log(this.imageUpload)
          if(this.imageUpload!=null&&this.rname!=""||this.rdes!=""){


            const formdata = new FormData()
            formdata.append('files',this.imageUpload)
            axios({
              method: 'post',
              url: '/Indenture/team/updateUrl',
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              data:formdata
            }).then((res) => {
              console.log(res)
              axios({
                method: 'post',
                url: '/Indenture/raceInsert',
                data: {
                  rname: this.rname,
                  cid: this.companyMsg.cid,
                  rurl:res.data.url,
                  desc:this.rdes
                }
              }).then((res2) => {
                console.log(res2.data)
                if (parseInt(res2.data.statue) == 1) {
                  alert("添加成功")
                  location.href = "./race.html"
                }
                else {
                  alert("添加失败")
                }
              })
            })
          }
        },
        async getImageUrl(event) {
          const file = event.target.files[0]
          console.log(file)
          const base64Str = await this.changeFileIntoBase64(file);
          this.showimageUrl = base64Str
          console.log(base64Str)
          this.imageUpload = file
        },
        changeFileIntoBase64(file) {
          return new Promise((resolve, reject) => {
            const fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = (result) => {
              const base64Str = result.currentTarget.result;
              resolve(base64Str);
            };
          });
        }

      }
    })
  </script>
</body>

</html>